<template>
  <!-- 分类 -->
  <view class="box-menuClss" v-if="!!dataList[0]">
    <view
      class="box-menuClss-item"
      :style="{ width: `calc(100% / ${line} - ${spacing})` }"
      v-for="item in dataList"
      :key="item"
      @click="onClick(item)"
    >
      <image
        :style="{
          borderRadius: `${borderRadius}`,
          width: `${widthHeigtImg}`,
          height: `${widthHeigtImg}`,
        }"
        :src="$formatImg(item[formatData.image])"
      ></image>
      <view class="menu-title" :style="{ marginTop: marginTop }"
        >{{ item[formatData.name] }}000</view
      >
    </view>

    <!-- 解决flex布局  justify-content: space-between 因个数导致布局样式乱的问题-->
    <!-- 用数据长度 % 你要显示的行数 如果刚好整除就循环0次等于没循环、如果有余数就用每行显示的个数减去 数据长度 % 每行显示的个数的余之后就能得出每行的空出来的个数 -->
    <view
      class="box-menuClss-item"
      :style="{ width: `calc(100% / ${line} - ${spacing})` }"
      v-for="item in dataList.length % line == 0
        ? 0
        : line - (dataList.length % line)"
      :key="item"
    >
      <view
        :style="{
          borderRadius: `${borderRadius}`,
          width: `${widthHeigtImg}`,
          height: `${widthHeigtImg}`,
        }"
      ></view>
      <view class="menu-title" :style="{ marginTop: 'marginTop' }"></view>
    </view>
  </view>
</template>
<script>
import { uniLinkTo } from "@/utils/uniPromise.js";
export default {
  props: {
    // 元素之间的间距 总间距除以个数 自己算
    spacing: {
      type: String,
      default: "25rpx",
    },
    // 一行显示多少个
    line: {
      type: [Number],
      default: 4,
    },
    // 自定义分类数据
    list: {
      type: [Array, Boolean],
      default: false,
    },
    // 图片高度和宽度
    widthHeigtImg: {
      type: String,
      default: "89rpx",
    },
    // 图片圆角
    borderRadius: {
      type: String,
      default: "50%",
    },
    // 图片与文字间距
    marginTop: {
      type: String,
      default: "10rpx",
    },
    // 分类接口类型
    type: {
      type: [String, Number],
      default: 1,
    },
    // 跳转传的url
    // 请求参数
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 定义渲染参数名
    formatData: {
      type: Object,
      default: () => {
        return {
          image: "img", //默认图片字段
          name: "name", //默认标题字段
          url: "url", //默认地址字段
        };
      },
    },
  },
  data() {
    return {
      dataList: [],
    };
  },

  created() {
    if (this.list) {
      this.dataList = this.list;
      return;
    }
    this.initData();
  },
  methods: {
    initData() {
      this.$resPost("GetCommonClassify", {
        type: this.type,
        page_size: 100,
        ...this.params,
      }).then((res) => {
        if (!res.data[0]) {
          return;
        }
        this.dataList = res.data;
      });
    },
    onClick(row) {
      if (row[this.formatData.url] && row[this.formatData.url] !== "#") {
        uniLinkTo(row[this.formatData.url]);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.box-menuClss-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
  cursor: pointer;
}

.box-menuClss {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  padding: 0 50rpx;
  margin-top: 50rpx;
  border-bottom: 10rpx solid #f5f5f5;
}
</style>
